import { Space, Steps, Tag } from 'antd-mobile'
import {
  CheckCircleFill,
  ClockCircleFill,
  HandPayCircleOutline,
} from 'antd-mobile-icons'
import { Step } from 'antd-mobile/es/components/steps/step'
import ListGroup, { ListGroupItem } from '../ListGroup'
import { useEffect, useState } from 'react'
import { getProjectGanttChart } from '@/service/InvestmentScheduling'

const index = () => {
  const [dataInfo, setDataInfo] = useState({})

  // 获取详情
  const getDetails = async () => {
    console.log('关键环节')
    const res = await getProjectGanttChart()
    console.log(res);
  }

  useEffect(() => {
    getDetails()

    return () => { }
  }, [])

  return (
    <>
      <ListGroup>
        <ListGroupItem title="国家编码" paragraph="dsaildjalksdjalksdals" />
        <ListGroupItem title="国家编码" paragraph="dsaildjalksdjalksdals" />
        <ListGroupItem title="国家编码" paragraph="dsaildjalksdjalksdals" />
      </ListGroup>
      <ul
        className={`bg_ffffff base-content-view d_between_center mt_12`}
        style={{ padding: '14px' }}
      >
        <li className={`d_column`} style={{ flex: 'auto' }}>
          <span className={`fontsize_12 color_999`}>当前环节</span>
          <span
            className={`fontsize_16 color_333 fw_600 d_flex d_flex_vertical_center`}
          >
            1.主体完工
            <Tag
              color="#FEEBEB"
              style={{ '--text-color': '#CD2F2F' }}
              className={`ml_5`}
            >
              未完成
            </Tag>
          </span>
        </li>
        <li style={{ flex: 'auto' }} className={`d_column`}>
          <span className={`fontsize_12 color_999`}>审批责任单位</span>
          <span className={`fontsize_16 color_333 fw_600`}>市xx公司</span>
        </li>
      </ul>

      <div className={`bg_ffffff base-content-view mt_12`}>
        <Steps
          direction="vertical"
          current={1}
          style={{
            '--title-font-size': '17px',
            '--description-font-size': '15px',
            '--indicator-margin-right': '12px',
            '--icon-size': '22px',
          }}
        >
          <Step
            title="1.主体完工"
            description={
              <ul>
                <li>审批责任单位：/</li>
                <li>计划完成时间：2025-07-14</li>
                <li>工作进展：正在开展基础施工</li>
              </ul>
            }
            icon={<CheckCircleFill />}
          />
          <Step
            title="2.意见征集"
            description={
              <ul>
                <li>审批责任单位：/</li>
                <li>计划完成时间：2025-07-14</li>
                <li>工作进展：正在开展基础施工</li>
              </ul>
            }
            icon={<ClockCircleFill />}
          />
          <Step
            title="3.主体完工"
            description={
              <ul>
                <li>审批责任单位：/</li>
                <li>计划完成时间：2025-07-14</li>
                <li>工作进展：正在开展基础施工</li>
              </ul>
            }
            icon={<HandPayCircleOutline />}
          />
        </Steps>
      </div>
    </>
  )
}

export default index
